<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF - 8">
        <title>China Map with ECharts</title>
        <!-- 引入ECharts在线库 -->

        <script src="./lib/echarts.min.js"></script>
        <script src="./lib/china.js"></script>
        <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script> -->
        <!-- 引入中国地图的地理数据 -->
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/map/js/china.js"></script>
    </head>

    <body>
        <!-- 为ECharts准备一个定义了宽高的DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script>
            function renderProvince() {
                const dom = document.querySelector('#main')
                const myEchart = echarts.init(dom)
                const dataList = [
                    { name: '南海诸岛', value: 0 },
                    { name: '北京', value: 0 },
                    { name: '天津', value: 0 },
                    { name: '上海', value: 0 },
                    { name: '重庆', value: 0 },
                    { name: '河北', value: 0 },
                    { name: '河南', value: 0 },
                    { name: '云南', value: 0 },
                    { name: '辽宁', value: 0 },
                    { name: '黑龙江', value: 0 },
                    { name: '湖南', value: 0 },
                    { name: '安徽', value: 0 },
                    { name: '山东', value: 0 },
                    { name: '新疆', value: 0 },
                    { name: '江苏', value: 0 },
                    { name: '浙江', value: 0 },
                    { name: '江西', value: 0 },
                    { name: '湖北', value: 0 },
                    { name: '广西', value: 0 },
                    { name: '甘肃', value: 0 },
                    { name: '山西', value: 0 },
                    { name: '内蒙古', value: 0 },
                    { name: '陕西', value: 0 },
                    { name: '吉林', value: 0 },
                    { name: '福建', value: 0 },
                    { name: '贵州', value: 0 },
                    { name: '广东', value: 0 },
                    { name: '青海', value: 0 },
                    { name: '西藏', value: 0 },
                    { name: '四川', value: 0 },
                    { name: '宁夏', value: 0 },
                    { name: '海南', value: 0 },
                    { name: '台湾', value: 0 },
                    { name: '香港', value: 0 },
                    { name: '澳门', value: 0 },
                ]
                const option = {
                    title: {
                        text: '籍贯分布',
                        top: 10,
                        left: 10,
                        textStyle: {
                            fontSize: 16,
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} 位学员',
                        borderColor: 'transparent',
                        backgroundColor: 'rgba(0,0,0,0.5)',
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    visualMap: {
                        min: 0,
                        max: 6,
                        left: 'left',
                        bottom: '20',
                        text: ['6', '0'],
                        inRange: {
                            color: ['#ffffff', '#0075F0'],
                        },
                        show: true,
                        left: 40,
                    },
                    geo: {
                        map: 'china',
                        roam: false,
                        zoom: 1.0,
                        label: {
                            normal: {
                                show: true,
                                fontSize: '10',
                                color: 'rgba(0,0,0,0.7)',
                            },
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0, 0, 0, 0.2)',
                                color: '#e0ffff',
                            },
                            emphasis: {
                                areaColor: '#34D39A',
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                    series: [
                        {
                            name: '籍贯分布',
                            type: 'map',
                            geoIndex: 0,
                            data: dataList,
                        },
                    ],
                }
                myEchart.setOption(option)
            }

            renderProvince()
        </script>
    </body>

</html>